<template>
    <el-dialog
        :close-on-click-modal="false"
        :modal="false"
        :visible.sync="showDialog"
        :show-close="false"
        class="diaLog"
    >
    <div class="title">{{keyPlace.keyPlaceData.name}}</div>
    <div class="com_num">
        <div class="tole_num">总房间</div>
        <div class="syu_num">剩余房间</div>
        <div class="rzrs_num">入住人数</div>
        <div class="fz_num">负载率</div>
    </div>
    <div class="num_var">
        <div class="tole_num_var">{{keyPlace.keyPlaceData.tolenum}}</div>
        <div class="syu_num_var">{{keyPlace.keyPlaceData.syunum}}</div>
        <div class="rzrs_num_var">{{keyPlace.keyPlaceData.rzrsnum}}</div>
        <div :class="setWarnColor(keyPlace.keyPlaceData.fznum)" class="normal_color"></div>
        <div class="fz_num_var">{{keyPlace.keyPlaceData.fznum}}%</div>
    </div>

    </el-dialog>
</template>

<script>
export default {
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
        keyPlace: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    computed: {
        keyPlaceData() {
            return this.keyPlace.keyPlaceData
        }
    },
    data() {
        return {}
    },
    methods: {
        // 设置列表的首个状态颜色
        setWarnColor(num) {
            if (num <= 50) {
                return 'green'
            } else if (num > 50 && num <= 70) {
                return 'yellow'
            } else {
                return 'red'
            }
        },
    },
    created() {
        // console.log(this.keyPlace)
    },
    mounted() {
        // this.init()
    },
    destroyed() {}
}
</script>

<style lang="less" scoped>
.diaLog {
    width: 340px;
    height: 112px;
    background: url('/static/icon/jddialog.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -112px;
    left: -150px;
}
.title{
    width: 100%;
    height: 24px;
    font-family: MicrosoftYaHei;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ffffff;
    position: absolute;
    top: 10px;
    left: 12px;
    text-align: left;
}
.com_num{
	font-family: MicrosoftYaHei;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #c4d5ee;
    .tole_num{
        width: 42px;
        height: 19px;
        position: absolute;
        top: 44px;
        left: 12px;
    }
    .syu_num{
        width: 56px;
        height: 19px;
        position: absolute;
        top: 44px;
        left: 90px;
    }
    .rzrs_num{
        width: 56px;
        height: 19px;
        position: absolute;
        top: 44px;
        left: 170px;
    }
    .fz_num{
        width: 42px;
        height: 19px;
        position: absolute;
        top: 44px;
        left: 250px;
    }
}

.num_var{
	font-family: ArialMT;
	font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ffffff;

    .tole_num_var{
        width: 54px;
        height: 28px;
        position: absolute;
        left: 12px;
        top: 67px;
    }
    .syu_num_var{
        width: 54px;
        height: 28px;
        position: absolute;
        left: 90px;
        top: 67px;
    }
    .rzrs_num_var{
        width: 54px;
        height: 28px;
        position: absolute;
        left: 170px;
        top: 67px;
    }
    .fz_num_status{
        width: 8px;
        height: 8px;
        background-color: #ff360c;
        border-radius: 2px;
    }
    .fz_num_var{
        width: 54px;
        height: 28px;
        position: absolute;
        left: 250px;
        top: 67px;
    }
}

.normal_color {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    position: absolute;
    top: 77px;
    left: 240px;
    &.red {
      background: #e02621;
    }
    &.yellow {
      background: #ffed4c;
    }
    &.green {
      background: #21e076;
    }
  }

</style>
